*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

body
{  
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        ". . ."
        ". conteudo ."
        ". . .";
    justify-content: stretch;
}

.cont
{
    grid-area: conteudo;
    padding: 10px;
    width: 90vw;
    text-align: center;
}

.cont p
{
    font-size: large;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

.cont a
{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.cont img
{
    width: 70%;
    margin-bottom: 10%;
}

@media only screen and (min-width: 600px)
{
    .cont
        {
            grid-area: conteudo;
            padding: 10px;
            width: 70vw;
            text-align: center;
        }
}

@media only screen and (min-width: 800px)
{
    .cont
        {
            grid-area: conteudo;
            padding: 10px;
            width: 50vw;
            text-align: center;
        }
}

@media only screen and (min-width: 1024px)
{
    .cont
        {
            grid-area: conteudo;
            padding: 10px;
            width: 30vw;
        }
}